import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { List, WingBlank, InputItem, WhiteSpace, Button, Toast } from 'antd-mobile'
import { $t } from '@/i18n'
import Verify from '@/validation/verify'
import loginForm from '@/validation/form_validate/auth/loginForm' 
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '@/app/Models/actions'
import './style.scss'

@connect(
    state => state.auth || {},
    dispatch => bindActionCreators(actions, dispatch)
)

class Login extends Component {
    
    state = {
        form: {
            name: '',
            password: '',
        },
        error: {
            name: false,
            password: false,
        }
    }

    static propTypes = {
        login: PropTypes.func.isRequired,
        errorMessage: PropTypes.string,
    }

    onErrorClick = (field) => {
        const msg = Verify.getErrorByField(field)

        if (msg.length) {
            Toast.info(msg[0]);
        }
    }

    handleChange = (val, field) => {
        let formData = {...this.state.form}
        formData[field] = val
        this.setState({form: formData})
    }

    handleRegister = () => {
        this.props.history.push('/auth/register')
    }

    // 登入操作
    handleLogin = () => {
        const result = Verify.exec(this.state.form, loginForm)
        this.setState({error: result.getErrorsFlag({...this.state.error})})
        
        if (result.isSuccess()) {
            this.props.login(this.state.form)    
        }
    }

    render() {
        const { errorMessage } = this.props
        
        return (
            <div>
                <h2 className="login-title">用户登入{this.state.name}</h2>
                <WingBlank>
                    <p className="error">{errorMessage}</p>
                    <List>
                    <InputItem 
                    type='text'
                    placeholder={ $t('message.auth.name.placeholder') }
                    maxLength='40'
                    onChange={ value => this.handleChange(value, 'name') }
                    error={ this.state.error.name }
                    onErrorClick={ () => this.onErrorClick('name') }
                >{ $t('message.auth.name.text') }</InputItem>

                <InputItem 
                    type='password'
                    placeholder={ $t('message.auth.password.text') }
                    maxLength='40'
                    onChange={ value => this.handleChange(value, 'password') }
                    error={ this.state.error.password }
                    onErrorClick={ () => this.onErrorClick('password') }
                >{ $t('message.auth.password.text') }</InputItem>
                    </List>
                    <WhiteSpace />
                    <Button 
                        type="primary" 
                        onClick={ this.handleLogin }
                    >登入</Button>
                    <WhiteSpace />
                    <Button onClick={ this.handleRegister } type="primary">注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login